<template>
  <div class="goodslist_container">
    <CommonBack :title="title"></CommonBack>
    <div class="list_box" ref="listBox">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <van-cell
          v-for="item in goodsList"
          :key="item.cat_name"
          :title="item.cat_name"
          @click="goToDetail(item)"
        >
          <!-- 左侧图片 -->
          <div class="left">
            <img :src="item.goods_small_logo || defaultImg" alt="" srcset="" />
          </div>
          <!-- 右测内容 -->
          <div class="right">
            <div class="content">
              {{ item.goods_name }}
            </div>
            <div class="price">￥ {{ item.goods_price }}</div>
          </div>
        </van-cell>
      </van-list>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
import CommonBack from "@/components/CommonBack.vue";
export default {
    name: "GoodsList",
    data() {
        return {
          title:'商品列表',
            // 请求参数对象
            queryObj: {
                // 查询关键词
                query: "",
                // 商品分类Id
                cid: "",
                // 页码值
                pagenum: 1,
                // 每页显示多少条数据
                pagesize: 10,
            },
            // 商品列表的数据
            goodsList: [],
            // 总数量，用来实现分页
            total: 0,
            defaultImg: "http://image5.suning.cn/uimg/b2c/newcatentries/0000000000-000000000160455569_1_400x400.jpg",
            loading: true,
            finished: false,
        };
    },
    methods: {
        firstCreate() {
            this.$store.commit("changeTabShow");
            // 将页面参数转存到 this.queryObj 对象中
            this.queryObj.query = this.$route.params.query || "";
            this.queryObj.cid = this.$route.query.cid || "";
            // console.log(this.$route);
        },
        async getGoodsList(val) {
          let storage = JSON.parse(sessionStorage.getItem('goodsList'))
          // console.log(storage);
            if( storage && !val){
              if( storage.query === this.queryObj.query && storage.cid === this.queryObj.cid ){
                this.goodsList = JSON.parse(sessionStorage.getItem('goodsList')).message
                return
              }
            }
            const { data: res } = await this.$http.get("/api/public/v1/goods/search", this.queryObj);
            if (res.meta.status !== 200)
                return Toast.fail("数据请求失败");
            // 将新旧数据进行拼接 ， 先将旧数据展开，再将新数据进行拼接
            const result = [...this.goodsList, ...res.message.goods];
            console.log(res);
            this.goodsList = result
            const obj = {
              query:this.queryObj.query,
              cid:this.queryObj.cid,
              message:result
            }
            console.log(obj);
            sessionStorage.setItem('goodsList' , JSON.stringify(obj) )
            this.total = res.message.total;
            // 将请求的转态进行修改
            this.loading =  false;
        },
        onLoad() {
            this.queryObj.pagenum++;
            // 判断数据是否已经请求完成
            // console.log(Math.ceil(this.total / 20));
            if (Math.ceil(this.total / this.queryObj.pagesize) < this.queryObj.pagenum) {
                this.finished = true;
            }
            let noRequest = true
            this.getGoodsList(noRequest);
        },

        goToDetail(item) {
            this.$router.push({
                path: `/detail/${item.goods_id}`,
                query: {
                    goods_id: item.goods_id
                }
            });
        }
    },
    created() {
        this.firstCreate();
        this.getGoodsList();
    },
    beforeMount() { },
    destroyed() {
        this.$store.commit("changeTabShow");
    },
    components: { CommonBack }
};
</script>

<style lang="less" scoped>
.goodslist_container {
  padding-top: 46px;
  .list_box {
    /deep/ .van-list {
      padding: 10px 5px;
      border-bottom: 1px solid #f0f0f0;
      .van-cell {
        .van-cell__value {
          display: flex;
          justify-content: space-between;
          .left {
            margin-right: 5px;
            img {
              width: 5.86rem;
              height: 5.86rem;
            }
          }
          .right {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: flex-start;
            .content {
              font-size: 0.76rem;
              text-align: left;
            }
            .price {
              font-size: 0.94rem;
              color: #c00000;
            }
          }
        }
      }
    }
  }


}
</style>